<ngm-analytical-card class="w-full h-full group"
  [appearance]="styling?.appearance"
  [title]="title"
  [dataSettings]="__dataSettings$ | async"
  [slicers]="selectOptions$ | async"
  [chartSettings]="chartSettings$ | async"
  [chartOptions]="chartOptions$ | async"
  [options]="options$ | async"
  (slicersChanging)="onLinkAnalysis($event)"
  (explain)="setExplains($event)"
>
  <div ngmAction class="flex items-center">
    <button mat-icon-button displayDensity="cosy" *ngIf="pin" (click)="unlinkAnalysis()">
      <mat-icon fontSet="material-icons-outlined">push_pin</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy" class="ngm-menu-trigger opacity-20 group-hover:opacity-100 duration-200"
      [color]="(hasSlicers$ | async) ? 'accent':''"
      [matMenuTriggerFor]="filtersMenu"
      #mt="matMenuTrigger"
      [class.active]="mt.menuOpen"
      [matTooltip]="'Story.Common.Slicers' | translate: {Default: 'Slicers'}"
      matTooltipPosition="above"
    >
      <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
    </button>
  </div>
</ngm-analytical-card>

<div *ngIf="editable && (placeholder$ | async)" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
  @if (chartAnnotation) {
    <pac-analytical-chart-placeholder class="w-full h-full"
      [chartAnnotation]="chartAnnotation"
    />
  } @else {
    <pac-placeholder-add />
    <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.AnalyticalCard.Title' | translate: {Default: 'Analytical Card'} }}</span>
  }
</div>

<mat-menu #filtersMenu="matMenu" class="pac-widget__slicer-menu">
  <div class="text-base font-semibold">{{ 'Ngm.Selection.Slicers' | translate: {Default: "Slicers"} }}</div>

  <ngm-slicers class="overflow-hidden" inline editable [slicers]="selectOptions$ | async"
    [dataSettings]="dataSettings$ | async"
    [limit]="5"
    [capacities]="[SlicersCapacity.CombinationSlicer, SlicersCapacity.AdvancedSlicer, SlicersCapacity.Variable]"
    (valueChange)="setSelectOptions($event)"
    (click)="$event.stopPropagation()"
  />
</mat-menu>
